<template>
  <view class="modal-overlay" v-if="visible" @tap="closeModal">
    <view class="modal-content" @tap.stop>
      <!-- 标题 -->
      <view class="modal-header">
        <text class="modal-title">完善个人信息</text>
        <view class="close-btn" @tap="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 内容区域 -->
      <view class="modal-body">
        <!-- 头像选择 -->
        <view class="avatar-section">
          <text class="section-title">选择头像</text>
          <view class="avatar-list">
            <view 
              class="avatar-item" 
              :class="{ active: selectedAvatar === avatar }"
              v-for="(avatar, index) in avatarList" 
              :key="index"
              @tap="selectAvatar(avatar)"
            >
              <image class="avatar-img" :src="avatar" mode="aspectFill" />
            </view>
          </view>
        </view>
        
        <!-- 昵称输入 -->
        <view class="nickname-section">
          <text class="section-title">输入昵称</text>
          <input 
            class="nickname-input" 
            v-model="nickName" 
            placeholder="请输入您的昵称" 
            maxlength="20"
          />
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="modal-footer">
        <button class="register-btn" @tap="handleRegister" :disabled="!canRegister || isRegistering">
          {{ isRegistering ? '注册中...' : '完成注册' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { registerWechatUser } from '@/api/login'
  import { setToken } from '@/utils/auth'

export default {
  name: 'RegistrationModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    openId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      nickName: '',
      selectedAvatar: '',
      isRegistering: false,
      avatarList: [
        '/static/avatars/avatar1.svg',
        '/static/avatars/avatar2.svg',
        '/static/avatars/avatar3.svg',
        '/static/avatars/avatar4.svg',
        '/static/avatars/avatar5.svg',
        '/static/avatars/avatar6.svg'
      ]
    }
  },
  computed: {
    canRegister() {
      return this.nickName.trim().length > 0 && this.selectedAvatar
    }
  },
  mounted() {
    // 默认选择第一个头像
    if (this.avatarList.length > 0) {
      this.selectedAvatar = this.avatarList[0]
    }
  },
  methods: {
    selectAvatar(avatar) {
      this.selectedAvatar = avatar
    },
    closeModal() {
      this.$emit('close')
    },
    async handleRegister() {
      if (!this.canRegister || this.isRegistering) {
        return
      }
      
      if (!this.openId) {
        uni.showToast({
          title: 'OpenID不能为空',
          icon: 'error'
        })
        return
      }
      
      this.isRegistering = true
      
      try {
        const response = await registerWechatUser(this.openId, this.nickName.trim(), this.selectedAvatar)
        
        if (response.code === 200) {
          // 保存token
          if (response.data && response.data.token) {
            setToken(response.data.token)
          }
          
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          
          // 触发注册成功事件，传递用户信息
          this.$emit('register-success', {
            userId: response.data.userId,
            userName: response.data.userName,
            nickName: response.data.nickName,
            avatar: response.data.avatar,
            openId: response.data.openId
          })
          
          this.closeModal()
          
          // 跳转到首页
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: response.msg || '注册失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('注册失败:', error)
        uni.showToast({
          title: '注册失败，请重试',
          icon: 'error'
        })
      } finally {
        this.isRegistering = false
      }
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.close-icon {
  font-size: 40rpx;
  color: #999999;
  line-height: 1;
}

.modal-body {
  padding: 30rpx;
}

.avatar-section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpx;
}

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.avatar-item {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid transparent;
  overflow: hidden;
  transition: all 0.3s ease;
}

.avatar-item.active {
  border-color: #1890ff;
  transform: scale(1.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.nickname-section {
  margin-bottom: 20rpx;
}

.nickname-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: #fafafa;
  transition: border-color 0.3s ease;
}

.nickname-input:focus {
  border-color: #1890ff;
  background-color: #ffffff;
}

.modal-footer {
  padding: 20rpx 30rpx 40rpx;
}

.register-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.register-btn:not([disabled]):active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #096dd9 0%, #1890ff 100%);
}

.register-btn[disabled] {
  background: #d9d9d9;
  color: #ffffff;
  cursor: not-allowed;
}
</style>